<template lang="pug">
  ul.grallery
    li(v-for="(comp, idx) in compositions") 
      div.svg-wrapper(v-html="comp.thumbnail" )
      span.note {{ comp.name  }}
</template>

<script setup>
import { ref, watch, inject } from 'vue';
import { mergeCompositionSvg } from '../../utils/mergeCompositionSvg.util'
import './composition.css'
import api from '../../apis/api'

const mainBrandId = inject('mainBrandId')
const compositions = inject('compositions')


/* 
 * reflash compositions & graphics
 */
watch(mainBrandId, async () => {
  const url = `compositions?brandId=${mainBrandId.value}`
  const datas = await api.get(url)
  compositions.value = datas.map(item => ({ svgCode: mergeCompositionSvg(item), name: item.name }))
})

</script>
